<template>
  <div class="profile-container">
    <div class="profile-content">
      <!-- 左侧头像和用户信息 -->
      <div class="user-info">
        <el-avatar 
          :size="100" 
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        />
        <div class="info-details">
          <div class="info-item">
            <span class="label">用户名：</span>
            <span class="value">{{ userStore.username }}</span>
          </div>
          <div class="info-item">
            <span class="label">手机号：</span>
            <span class="value">{{ userInfo.phone || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ userInfo.gender || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">年龄：</span>
            <span class="value">{{ userInfo.age || '未设置' }}</span>
          </div>
          <div class="info-item">
            <span class="label">地址：</span>
            <span class="value">{{ userInfo.address || '未设置' }}</span>
          </div>
          <div class="info-item password-item">
            <span class="label">密码：</span>
            <span class="value">********</span>
            <el-button type="primary" size="small" @click="showPasswordDialog">修改密码</el-button>
          </div>
        </div>
      </div>

      <!-- 病例信息 -->
      <div class="case-info">
        <h3>病例简介</h3>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入病例简介"
          v-model="caseInfo"
          disabled
        />
      </div>

      <!-- 编辑按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="showEditDialog">编辑个人信息</el-button>
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" width="400px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePassword">确认</el-button>
      </template>
    </el-dialog>

    <!-- 编辑个人信息对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑个人信息" width="500px">
      <el-form :model="editForm" ref="editFormRef" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="editForm.gender" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="editForm.age" :min="1" :max="120" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editForm.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUserInfo">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 确保用户信息已加载
onMounted(() => {
  if (!userStore.isLoggedIn) {
    const loaded = userStore.loadUserInfo()
    if (!loaded) {
      ElMessage.error('用户未登录')
      router.push('/login')
    }
  }
})

// 用户详细信息
const userInfo = reactive({
  phone: '13800138000',
  gender: '男',
  age: 45,
  address: '北京市海淀区'
})

// 模拟病例信息
const caseInfo = ref('患者于2023年10月15日入院，诊断为右侧股骨颈骨折，已于2023年10月16日行右髋关节置换术，术后恢复良好，现需要日常生活照料和康复训练辅助。')

// 修改密码相关
const passwordDialogVisible = ref(false)
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const showPasswordDialog = () => {
  passwordDialogVisible.value = true
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}

const updatePassword = () => {
  passwordFormRef.value.validate(valid => {
    if (valid) {
      // 这里可以调用API更新密码
      ElMessage.success('密码修改成功')
      passwordDialogVisible.value = false
    }
  })
}

// 编辑个人信息相关
const editDialogVisible = ref(false)
const editFormRef = ref(null)
const editForm = reactive({
  phone: '',
  gender: '',
  age: 0,
  address: ''
})

const showEditDialog = () => {
  editDialogVisible.value = true
  editForm.phone = userInfo.phone
  editForm.gender = userInfo.gender
  editForm.age = userInfo.age
  editForm.address = userInfo.address
}

const updateUserInfo = () => {
  // 这里可以调用API更新用户信息
  Object.assign(userInfo, editForm)
  ElMessage.success('个人信息更新成功')
  editDialogVisible.value = false
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确认退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout()
    router.push('/login')
    ElMessage.success('已退出登录')
  }).catch(() => {})
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  min-height: calc(100vh - 100px);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.profile-content {
  max-width: 800px;
  margin: 0 auto;
}

.user-info {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 30px;
  border-bottom: 1px solid #e4e7ed;
}

.info-details {
  flex: 1;
}

.info-item {
  margin-bottom: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  width: 80px;
  color: #606266;
}

.value {
  color: #303133;
  margin-right: 20px;
}

.password-item {
  display: flex;
  align-items: center;
}

.case-info {
  padding: 30px;
  border-bottom: 1px solid #e4e7ed;
}

.case-info h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
}

.action-buttons {
  padding: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style> 